import { message } from 'antd';
import defaultSettings from '../defaultSettings';

let lessNodesAppended;
const updateTheme = primaryColor => {
    // Don't compile less in production!
    if (APP_TYPE !== 'site') {
        return;
    }
    // Determine if the component is remounted
    if (!primaryColor) {
        return;
    }
    const hideMessage = message.loading('正在编译主题！', 0);
    function buildIt() {
        if (!window.less) {
            return;
        }
        setTimeout(() => {
            window.less
                .modifyVars({
                    '@primary-color': primaryColor
                })
                .then(() => {
                    hideMessage();
                })
                .catch(() => {
                    message.error('Failed to update theme');
                    hideMessage();
                });
        }, 200);
    }
    if (!lessNodesAppended) {
        // insert less.js and color.less
        const lessStyleNode = document.createElement('link');
        const lessConfigNode = document.createElement('script');
        const lessScriptNode = document.createElement('script');
        lessStyleNode.setAttribute('rel', 'stylesheet/less');
        lessStyleNode.setAttribute('href', '/color.less');
        lessConfigNode.innerHTML = `
      window.less = {
        async: true,
        env: 'production',
        javascriptEnabled: true
      };
    `;
        lessScriptNode.src =
            'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
        lessScriptNode.async = true;
        lessScriptNode.onload = () => {
            buildIt();
            lessScriptNode.onload = null;
        };
        document.body.appendChild(lessStyleNode);
        document.body.appendChild(lessConfigNode);
        document.body.appendChild(lessScriptNode);
        lessNodesAppended = true;
    } else {
        buildIt();
    }
};

const updateColorWeak = colorWeak => {
    document.body.className = colorWeak ? 'colorWeak' : '';
};

export default {
    namespace: 'setting',
    state: defaultSettings,
    reducers: {
        getSetting(state) {
            const setting = {};
            const urlParams = new URL(window.location.href);
            Object.keys(state).forEach(key => {
                if (urlParams.searchParams.has(key)) {
                    const value = urlParams.searchParams.get(key);
                    setting[key] = value === '1' ? true : value;
                }
            });
            const { primaryColor, colorWeak } = setting;
            if (state.primaryColor !== primaryColor) {
                updateTheme(primaryColor);
            }
            updateColorWeak(colorWeak);
            return {
                ...state,
                ...setting
            };
        },
        changeSetting(state, { payload }) {
            const urlParams = new URL(window.location.href);
            Object.keys(defaultSettings).forEach(key => {
                if (urlParams.searchParams.has(key)) {
                    urlParams.searchParams.delete(key);
                }
            });
            Object.keys(payload).forEach(key => {
                if (key === 'collapse') {
                    return;
                }
                let value = payload[key];
                if (value === true) {
                    value = 1;
                }
                if (defaultSettings[key] !== value) {
                    urlParams.searchParams.set(key, value);
                }
            });
            const { primaryColor, colorWeak, contentWidth } = payload;
            if (state.primaryColor !== primaryColor) {
                updateTheme(primaryColor);
            }
            if (state.contentWidth !== contentWidth && window.dispatchEvent) {
                window.dispatchEvent(new Event('resize'));
            }
            updateColorWeak(colorWeak);
            window.history.replaceState(null, 'setting', urlParams.href);
            return {
                ...state,
                ...payload
            };
        }
    }
};
